<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" />
    <title>中大奖</title>
    <script src="./vue.global.js"></script>
    <script src="./utils.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        user-select: none;
      }
      html,
      body {
        height: 100%;
        padding: 0 0px;
        padding-bottom: 20px;
        background-color: #fff;
      }
      .flex {
        display: flex;

      }
      .center {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .padding-h-10 {
        padding: 0 10px 0 10px;
      }

      .divider {
        width: 100%;
        height: 10px;
        background-color: #eee;
        margin-top: 10px;
      }

      .step1 {
        user-select: none;
      }
      .step1-title {
        width: 100%;
        padding: 30px 0 20px 0;
        font-size: 24px;
        font-weight: bold;
      }

      .ex-box {
        margin-bottom: 20px;
      }
      .title,
      .title {
        text-align: center;
        font-size: 18px;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        color: #666;
      }

      .ex-item {
        position: relative;
        color: #fff;
        width: 28px;
        height: 28px;
        font-size: 16px;
        border-radius: 50%;
        margin: 10px 7px 0 7px;
        font-weight: bold;
      }

      .ex-item.num-blue,
      .ball-blue {
        box-shadow: -9px -9px 8px 8px rgb(8, 83, 245) inset;
      }

      .ex-item.num-red,
      .ball-red {
        box-shadow: -9px -9px 8px 8px red inset;
      }

      .ex-item.disable {
        box-shadow: -9px -9px 8px 8px #ccc inset;
      }
      .repeat-box {
        padding: 10px 0;
      }

      .repeat-item {
        width: 60px;
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      .repeat-left {
        margin-right: 60px;
      }


      /* .ex-item::before {
        content: "";
        position: absolute;
        left: 10px;
        top: 10px;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 0 5px 2px red inset;

      } */

      .num-item {
        width: 28px;
        height: 28px;
        font-size: 16px;
        margin: 15px 10px 0 0px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      .num-item-box {
        justify-content: space-evenly;
      }

      .ex-ball-box {
        display: flex;
        flex-wrap: wrap;
      }

      .start {
        padding: 20px 0;
        margin-top: 30px;
      }

      .start-btn {
        font-size: 24px;
        background-color: rgb(8, 83, 245);
        color: #fff;
        border-radius: 8px;
        padding: 14px 35px;
      }

      .isblue {
        background-color: rgb(8, 83, 245);
        color: #fff;
      }
      .result-line {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
      }
      .result-ball {
        color: #fff;
        width: 28px;
        height: 28px;
        font-size: 16px;
        border-radius: 50%;
        margin: 0 10px;
        font-weight: bold;
      }

      .red {
        color: red;
      }

      .blue {
        color: rgb(8, 83, 245);
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="step1">
        <!-- <div class="step1-title center">第一步: 选球配置</div> -->
        <!-- 分割线 -->
        <!-- <div class="divider"></div> -->
        <div class="ex-box padding-h-10">
          <div class="title">选择要排除的红球</div>
          <div class="ex-ball-box">
            <div
              class="num-red ex-item center"
              v-for="item in state.redNum"
              :key="item"
              :class="{disable: state.redExcludes.includes(item)}"
              @click="redExcludeFn(item)"
            >
              {{item}}
            </div>
          </div>
        </div>
        <!-- 分割线 -->
        <div class="divider"></div>
        <div class="ex-box padding-h-10">
          <div class="title">选择要排除的蓝球</div>
          <div class="ex-ball-box">
            <div
              class="num-blue ex-item center"
              v-for="item in state.blueNum"
              :key="item"
              :class="{disable: state.blueExcludes.includes(item)}"
              @click="blueExcludeFn(item)"
            >
              {{item}}
            </div>
          </div>
        </div>
        <!-- 分割线 -->
        <div class="divider"></div>
        <div class="isrepeat padding-h-10">
          <div class="title">蓝球不重复</div>
          <div class="repeat-box center">
            <div
              class="repeat-item repeat-left center"
              :class="{isblue: state.isBlueNoRepeat}"
              @click="setBlueNoRepeat(true)"
            >
              是
            </div>
            <div
              class="repeat-item center"
              :class="{isblue: !state.isBlueNoRepeat}"
              @click="setBlueNoRepeat(false)"
            >
              否
            </div>
          </div>
        </div>
        <!-- 分割线 -->
        <div class="divider"></div>
        <div class="num-box padding-h-10">
          <div class="title">生成几注</div>
          <div class="num-item-box center">
            <div
              class="num-item center"
              v-for="item in state.countNum"
              :key="item"
              :class="{isblue: state.count === item }"
              @click="setCount(item)"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <div class="divider"></div>
        <div class="start center">
          <div class="start-btn center" @click="getBallInfoFn">随机生成</div>
        </div>
      </div>
      <div class="step2">
        <div class="divider"></div>
        <div class="ex-box result padding-h-10">
          <div class="title">{{ state.resultTitle }}</div>
          <div class="result-content">
            <div class="result-line center" v-for="item in state.ballInfoList" :key="JSON.stringify(item.red)">
              <div class="result-ball ball-red center" v-for="red in item.red">{{ red }}</div>
              <div class="result-ball ball-blue center">{{ item.blue[0] }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-box" style="height: 100px;"></div>
    <script>
      const { createApp, ref, reactive, toRef } = Vue;
      let bottomBox = document.querySelector('.bottom-box');
      createApp({
        setup() {
          const state = reactive({
            redNum: [
              1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
              20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33,
            ],
            blueNum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
            countNum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            redExcludes: [],
            blueExcludes: [],
            isBlueNoRepeat: true,
            count: 5,
            ballInfoList: [],
            resultTitle: "结果生成",
          });

          function redExcludeFn(item) {
            console.log("red-click", item);
            if (state.redExcludes.includes(item)) {
              state.redExcludes = state.redExcludes.filter((v) => v !== item);
              console.log("包含", state.redExcludes);
            } else {
              state.redExcludes.push(item);
              console.log("不包含", state.redExcludes);
            }
          }

          function blueExcludeFn(item) {
            console.log("red-click", item);
            if (state.blueExcludes.includes(item)) {
              state.blueExcludes = state.blueExcludes.filter((v) => v !== item);
              console.log("包含", state.blueExcludes);
            } else {
              state.blueExcludes.push(item);
              console.log("不包含", state.blueExcludes);
            }
          }

          function setBlueNoRepeat(flag) {
            console.log('flag:', flag);
            state.isBlueNoRepeat = flag;
          }

          function setCount(num) {
            state.count = num;
          }

          function resultFn(result) {
            state.ballInfoList = result;
            bottomBox.scrollIntoView();
            if (result.length === state.count) {
              state.resultTitle = '生成结果完成！'
            }
          }

          function getBallInfoFn() {
            state.resultTitle = '生成结果中...'
            getBallList(
              state.count,
              [],
              resultFn,
              state.blueExcludes,
              state.redExcludes,
              true
            );
          }
          return {
            state,
            redExcludeFn,
            blueExcludeFn,
            setBlueNoRepeat,
            setCount,
            getBallInfoFn,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
